<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>工作平台</BreadcrumbItem>
      <BreadcrumbItem>首页</BreadcrumbItem>
    </Breadcrumb>
    <Row type="flex" justify="space-between" class="code-row-bg">
      <Col span="4">
        <mycard icon="&#xe600;" bgcolor="#2d8cf0" count="202" title="新增用户"></mycard>
      </Col>
      <Col span="4">
        <mycard icon="&#xe869;" bgcolor="#19BE6B" count="232" title="累计点击"></mycard>
      </Col>
      <Col span="4">
        <mycard icon="&#xe7a0;" bgcolor="#FF9900" count="202" title="新增问答"></mycard>
      </Col>
      <Col span="4">
        <mycard icon="&#xe608;" bgcolor="#ED3F14" count="657" title="分享统计"></mycard>
      </Col>
      <Col span="4">
        <mycard icon="&#xe6f9;" bgcolor="#E46CBB" count="12" title="新增互动"></mycard>
      </Col>
      <Col span="4">
        <mycard icon="&#xe61f;" bgcolor="#9A66E4" count="14" title="新增页面"></mycard>
      </Col>
    </Row>
    <div class="i-echarts">
      <div class="echartsleft">
        <div id="myChart" :style="{width: '400px', height: '300px'}"></div>
      </div>
      <div class="echartsright">
        <div id="myChartTwo" :style="{width: '800px', height: '300px'}"></div>
      </div>
    </div>
    <div class="b-echarts">
      <div id="myChartThree" :style="{width: '1200px', height: '300px'}"></div>
    </div>
  </div>
</template>

<script>
import mycard from "@/components/mycard";

export default {
  components: {
    mycard
  },
  mounted() {
    this.drawLine();
    this.drawLino();
    this.drawLini();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "用户访问来源",
          left: "center"
        },
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{a} <br/>{b} : {c} ({d}%)"
        // },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            center: ["40%", "50%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    drawLino() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChartTwo"));
      // 绘制柱状图
      myChart.setOption({
        color: ["#3398DB"],
        title: {
          text: "用户访问来源",
          left: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [5000, 10000, 15000, 20000, 25000, 30000, 35000]
          }
        ]
      });
    },
    drawLini() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChartThree"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: [
            "直接访问",
            "邮件营销",
            "联盟广告",
            "视频广告",
            "搜索引擎",
            "百度",
            "谷歌",
            "必应",
            "其他"
          ]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "邮件营销",
            type: "bar",
            stack: "广告",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "联盟广告",
            type: "bar",
            stack: "广告",
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "视频广告",
            type: "bar",
            stack: "广告",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "搜索引擎",
            type: "bar",
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine: {
              lineStyle: {
                type: "dashed"
              },
              data: [[{ type: "min" }, { type: "max" }]]
            }
          },
          {
            name: "百度",
            type: "bar",
            barWidth: 5,
            stack: "搜索引擎",
            data: [620, 732, 701, 734, 1090, 1130, 1120]
          },
          {
            name: "谷歌",
            type: "bar",
            stack: "搜索引擎",
            data: [120, 132, 101, 134, 290, 230, 220]
          },
          {
            name: "必应",
            type: "bar",
            stack: "搜索引擎",
            data: [60, 72, 71, 74, 190, 130, 110]
          },
          {
            name: "其他",
            type: "bar",
            stack: "搜索引擎",
            data: [62, 82, 91, 84, 109, 110, 120]
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
.ivu-card-body {
  padding: 0px;
}
.ivu-icon-md-person-add {
  font-size: 36px;
  color: #fff;
}
.card-container {
  display: flex;
  align-items: center;
}
.card-container .left {
  text-align: center;
  width: 92px;
  height: 110px;
  background: #2d8cf0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-container .right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 110px;
  flex-direction: column;
}
.ivu-col-span-4 {
  width: 16%;
  margin-top: 10px;
}
.i-echarts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 0 0;
  box-sizing: border-box;
}
.echartsleft {
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background-color: #fff;
}

.echartsright {
  width: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background-color: #fff;
}

.b-echarts {
  width: 100%;
  height: 320px;
  background-color: #fff;
  border-radius: 3px;
  margin: 20px 0;
  box-sizing: border-box;
}
</style>